<template>
  <div class="app-container">
    <u-page title="开卡记录">

      <u-filtered>
        <el-form :inline="true" :model="listQuery" class="search-form">
          <el-form-item label="卡号" prop="memberId">
            <el-input v-model="listQuery.memberId" placeholder="请输入卡号" clearable />
          </el-form-item>
          <el-form-item label="操作时间">
            <u-date-time-picker v-model="searchDate" @change="changeSearchDate" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="hdlFilter">搜索</el-button>
            <el-button type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
          </el-form-item>
        </el-form>
      </u-filtered>

      <u-table
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="hdlList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button type="text" @click="hdlEdit(row)">详情</el-button>
            </template>
          </el-table-column>
        </template>
      </u-table>

    </u-page>

    <u-dialog title="记录详情" :show.sync="dialogFormVisible" :footer="false">
      <el-form ref="dialogForm" :model="dataForm" label-width="100px">

        <el-descriptions :column="2" border>
          <el-descriptions-item>
            <template slot="label">
              操作时间
            </template>
            {{ dataForm.createdAt | date }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template slot="label">
              卡号
            </template>
            {{ dataForm.memberId }}
          </el-descriptions-item>

        </el-descriptions>

      </el-form>
    </u-dialog>

    <u-dialog title="开卡数据" :show.sync="jsonDialogVisible" :footer="false" width="45%" class="code">
      <el-input v-model="detailJson" autosize type="textarea" disabled placeholder="{}" />
    </u-dialog>

  </div>
</template>
<script>
export default {
  data: function() {
    return {
      api: this.$u.api.PluginsCardLog,
      list: [],
      listLoading: false,
      listOptions: {
        mutiSelect: false, // boolean 是否多选
        stripe: true // boolean 斑马纹
      },
      listQuery: {
        pageNumber: 1,
        pageSize: 10,
        totalCount: 1,
        beginTime: '',
        endTime: '',
        cardNo: '',
        type: '',
        ack: ''
      },
      // 表格
      columns: [
        {
          prop: 'memberId',
          label: '卡号'
        },
        {
          prop: 'body',
          label: '开卡数据',
          render: (h, params) => {
            return h('el-button', { props: { type: 'text' }, on: {
              click: () => this.detailToJson(params.row)
            }}, '开卡数据')
          }
        },
        {
          prop: 'createdAt',
          label: '操作时间',
          timestamp: true
        }
      ],
      dialogFormVisible: false,
      dataForm: {},
      jsonDialogVisible: false,
      detailJson: {}
    }
  },
  created() {
    this.hdlList()
  },
  methods: {
    // 查看传输内容
    detailToJson(row) {
      const { body } = row
      const content = body ? JSON.parse(body) : {}
      console.log(content)
      this.detailJson = JSON.stringify(content, null, '\t')
      this.jsonDialogVisible = true
    },
    // 导出数据
    handleDownload() {
      // 复制值
      const list = this.$u.deepClone(this.list)
      // 业务数据处理
      list.forEach(item => {
        this.$set(item, 'createdAt', item.createdAt ? this.$u.timeFormat(item.createdAt) : '')
      })

      console.log(list)
      // 表头&表数据
      const tHeader = ['卡号', '开卡数据', '创建时间', '备注']
      const filterVal = ['memberId', 'body', 'createdAt', 'note']
      const data = list.map(v => filterVal.map(j => { return v[j] }))
      this.$u.exports.excel('开卡记录', tHeader, data)
    }
  }
}
</script>

<style lang="scss" scoped>

.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }

    .code .el-textarea.is-disabled .el-textarea__inner {
      background-color: #060606 !important;
      color: #c6c6c6 !important;
    }

    .ack .el-input{
      width: 120px;
    }
  }
}

</style>
